import {
  Fullscreen,
  Zoom,
  MouseLocation,
  MapTheme,
  Scale,
  Logo,
} from '@antv/l7'

export function useControl(scene,map){
    const controls = {}
    controls['fullScreen'] = new Fullscreen({position: 'topleft'})
    controls['zoom'] = new Zoom({position: 'leftcenter'})
    controls['mouseLocation'] = new MouseLocation({position: 'bottomright'})
    controls['scale'] = new Scale({position: 'bottomleft'})
    controls['logo'] = new Logo({
      href: 'http://www.x-zd.com',
      img: 'http://www.x-zd.com/themes/simpleboot3_web/public/web/images/image/logo_03.png',
    })
    controls['mapTheme'] = new MapTheme({
      options: [
        {
          text: '白天导航地图',
          value: 'mapbox://styles/mapbox/navigation-day-v1',
          img: '/themes/navigation-day-v1.png',
        },
        {
          text: '夜间导航地图',
          value: 'mapbox://styles/mapbox/navigation-night-v1',
          img: '/themes/navigation-night-v1.png',
        },
        {
          text: '标记卫星图',
          value: 'mapbox://styles/mapbox/satellite-streets-v12',
          img: '/themes/satellite-streets-v12.png',
        },
        {
          text: '普通卫星图',
          value: 'mapbox://styles/mapbox/satellite-v9',
          img: '/themes/satellite-v9.png',
        },
      ],
    })
    
    scene.on('loaded',() => {
        for (let key in controls) {
          scene.addControl(controls[key])
        }
        controls['scale'].hide()
    })
    
    map.on('zoom',() => {
        const zoom = map.getZoom()
        if(zoom < 5){
            controls['scale'].hide()
        }else{
            controls['scale'].show()
        }
    })
}